<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="任务中心" :visible.sync="dialogVisible" @close="resetForm()" width="1100px">
        <div class="flexbox flexcenter sch_content">
            <div class="sch_tab" :class="{'active':index==1}" @click="selectType(1)">录入任务</div>
            <div class="sch_tab" :class="{'active':index==2}" @click="selectType(2)">导出任务</div>
        </div>
        <div v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <StartTable v-if="index==1" :startData="startData" :startInfo="startInfo" :stotal="stotal" @getStarList="getStarList"/>
            <ExportTable v-else-if="index==2" :exportData="exportData" :queryInfo="queryInfo" :total="total" @getTaskList="getTaskList"/>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="resetForm()" class="el-button-width" size="small">关 闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
import ExportTable from './ExportTable'
import StartTable from './StartTable'
export default {
    components: {
        ExportTable,
        StartTable
    },
    name: "",
    data() {
        return {
            index:1,
            loading: false,
            dialogVisible: false,
            exportData: [],
            queryInfo: {
                page: 1,
                limit: 20,
                query: "",
            },
            total: 0,

            startData: [],
            startInfo: {
                page: 1,
                limit: 20,
                query: "",
            },
            stotal: 0,
        };
    },

    created() {
        
    },
    methods: {
        getData() {
            this.dialogVisible = true;
            this.getStarList();
        },

        selectType(type){
            this.index = type
            if(type==1){
                this.startInfo.page = 1
                this.getStarList()
            }else if(type==2){
                this.queryInfo.page = 1
                this.getTaskList()
            }
        },

        

        //获取达人列表
        async getStarList() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "fxdata/sellibrary/accStarList",
                this.startInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.stotal = res.data.count;
                this.startData = res.data.list;
            }
        },

        //获取列表
        async getTaskList() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "fxdata/sellibrary/taskList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.total = res.data.count;
                this.exportData = res.data.list;
            }
        },

        // 关闭重置表单
        resetForm() {
            this.dialogVisible = false;
        },
    },
};
</script>
<style scoped>
.sch_content{
    margin-top: -20px;
    margin-bottom: 20px;
}
.sch_tab {
    height: 56px;
    font-size: 16px;
    color: #616c85;
    line-height: 56px;
    margin-right: 20px;
    position: relative;
    cursor: pointer;
}
.sch_tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #4475ff;
    transition: all 0.3s;
    transform: scaleX(0);
}
.sch_tab.active {
    font-weight: bold;
    color: #17233d;
}
.sch_tab.active::after {
    transform: scaleX(1);
}

</style>

